<template>
<div class="auth-agent">
    <div class="type-top-box">
        <el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="关键字：">
                <el-input v-model="formInline.ad" placeholder="请输入关键字搜索"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="initData()">查询</el-button>
            </el-form-item>
            <div class="right-outlogin">
                <span class="add-user" @click="addUser()">
                    <i class="el-icon-circle-plus"></i>新增
                </span>
            </div>
        </el-form>
    </div>
    <el-table v-loading="thisLoading" :border="true" :data="tableData" size="small" height="68vh">
        <el-table-column align="center" label="AD账户" width="170">
            <template slot-scope="scope">
                <span class="ad-name" @click="editUser(scope.row)">{{scope.row.ad}}</span>
            </template>
        </el-table-column>     
        <el-table-column align="center" prop="userNm" label="姓名"></el-table-column>      
        <el-table-column align="center" prop="agentAd" label="代理人AD"></el-table-column>      
        <el-table-column align="center" prop="agentNm" label="代理人姓名"></el-table-column>
        <el-table-column align="center" label="开始时间">
            <template slot-scope="scope">
                <span>{{changeTimeValue(scope.row.startTime)}}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="agentNm" label="结束时间">
             <template slot-scope="scope">
                <span>{{changeTimeValue(scope.row.endTime)}}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
            <template slot-scope="scope">
                <el-button 
                    type="text"
                    class="edig-text"
                    @click="openThisPop(scope.row,scope.$index)"
                >删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="page-total">
        <pagination-table
            :total="total"
            :currentPage="pageIndex"
            :pagesize="formInline.pageSize"
            @pageChange="pageChange"
            @sizeChange="sizeChange"
        ></pagination-table>
    </div>
    <add-edit-agent ref="adedituser" @updataThisData="initData"></add-edit-agent>
</div>
</template>
<script>
import Vue from "vue";
import { alertMessage } from "@/config/myUtil";
import AddEditAgent from './components/addeditagent';
import { getAuthListApi, getAuthDeleteApi } from "@/api/getData";
import PaginationTable from "@/components/public/paginationTable";
import { Form, FormItem, Table, TableColumn } from "element-ui";
Vue.use(Form);
Vue.use(Table);
Vue.use(FormItem);
Vue.use(TableColumn);
export default {
  name: "authAgent",
  components: {
    "add-edit-agent":AddEditAgent,
    "pagination-table": PaginationTable
  },
  data() {
    return {
      formInline: {
        ad: "",
        pageSize: 20,
        pageIndex: 0
      },
      pageIndex: 1,
      total:10,
      tableData:[],
      thisLoading:false
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData(param) {
        try {
            if(!param){
                this.formInline.pageIndex = 0;
                this.pageIndex = 1;
                this.total = 0;
            }
            let data = await getAuthListApi(this.formInline);
            this.tableData = data;
            this.total = data[0].total;
        } catch (error) {
            console.log(error);
        }
    },
    async deleteOneData(ad){
        try {
            let data = await getAuthDeleteApi({ad});
            if(data == 1){
                alertMessage("删除成功")
                this.initData();
            }
        } catch (error) {
            console.log(error);
        }
    },
    changeTimeValue(num){
        return num ? moment(num).format("YYYY-MM-DD") : "";
    },
    openThisPop(scope){
        this.$confirm('此操作将删除该条信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteOneData(scope.ad)
        }).catch(() => {});
    },
    pageChange(num){
        this.formInline.pageIndex = num - 1;
        this.initData("set");
    },
    sizeChange(num){
        this.formInline.pageSize = num;
        this.initData();
    },
    addUser(){
        this.$refs.adedituser.changeStatus("add")
    },
    editUser(item){
        this.$refs.adedituser.changeStatus("edit",item)
    }
  }
};
</script>
<style lang="less" scoped>
@import url("./less/authagent.less");
</style>